<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span><i class="el-icon-sunny" /> 南宁天气</span>
          </div>
          <div v-if="weather">
            <el-row :gutter="20" class="weather-content">
              <el-col :span="8">
                <div class="weather-icon">
                  <i class="el-icon-sunny" style="font-size: 80px; color: #F7C731;"></i>
                </div>
                <div class="weather-temp">{{ weather.temp }}°C</div>
                <div class="weather-text">{{ weather.text }}</div>
              </el-col>
              <el-col :span="16">
                <el-descriptions class="margin-top" title="详细信息" :column="1" border>
                  <el-descriptions-item label="城市">{{ weather.cityName }}</el-descriptions-item>
                  <el-descriptions-item label="体感温度">{{ weather.feelsLike }}°C</el-descriptions-item>
                  <el-descriptions-item label="湿度">{{ weather.humidity }}%</el-descriptions-item>
                  <el-descriptions-item label="风向">{{ weather.windDir }}</el-descriptions-item>
                  <el-descriptions-item label="风力等级">{{ weather.windScale }}级</el-descriptions-item>
                  <el-descriptions-item label="风速">{{ weather.windSpeed }}km/h</el-descriptions-item>
                  <el-descriptions-item label="更新时间">{{ parseTime(weather.updateTime) }}</el-descriptions-item>
                </el-descriptions>
              </el-col>
            </el-row>
          </div>
          <div v-else class="empty-block">
            <el-empty description="暂无天气数据"></el-empty>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getWeather } from "@/api/system/weather";

export default {
  name: "Weather",
  data() {
    return {
      // 天气信息
      weather: null,
    };
  },
  created() {
    this.getWeather();
  },
  methods: {
    /** 获取天气数据 */
    getWeather() {
      getWeather().then(response => {
        this.weather = response.data;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.weather-content {
  margin: 20px 0;
  .weather-icon {
    text-align: center;
    margin-bottom: 10px;
  }
  .weather-temp {
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 5px;
  }
  .weather-text {
    text-align: center;
    font-size: 18px;
    color: #606266;
  }
}
.empty-block {
  min-height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style> 